<script>
let api = "http://localhost:9701/web/rental-hourse/"
export default {
  data() {
    return {
      queryParam: {
        page: 1,
        limit: 10,
        structure: '',
        rentLess: '',
        rentMore: '',
        location: '',
      },
      tableData: [],
      total: 0,

      textList: [
        "有效房源个" + "000000" + "个，",
        "求租用户" + "000000" + "个，",
        "累计拉黑中介" + "000000" + "个，",
        "有效房源个" + "000000" + "个，",
        "求租用户" + "000000" + "个，",
        "累计拉黑中介" + "000000" + "个，"
      ],
      currentIndex: 0,
      timer: null
    }
  },
  created() {
    this.getRentalHourse()
  },
  mounted() {

    this.startAutoPlay();
  },
  beforeDestroy() {
    this.stopAutoPlay();
  },
  methods: {
    getRentalHourse() {
      this.axios.get(api + 'getRentalHourseList').then(res => {
        this.tableData = res.data.data
        if (this.tableData.length > 0) {
          this.tableData.forEach(item => {
            if (item.imagesUrl){
              item.imagesUrl = item.imagesUrl.split(',')
            }
          })
        }
      })
    },
    viewDetails(id) {
      this.$router.push({path: '/rentalHouse', query: {id: id}})
    },
    viewSublet() {
      this.$router.push({path: '/indexSublet'})
    },
    viewDemand() {
      this.$router.push({path: '/demandInfo'})
    },
    startAutoPlay() {
      this.timer = setInterval(() => {
        this.next();
      }, 3000);
    },
    stopAutoPlay() {
      clearInterval(this.timer);
    },
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.textList.length;
      const carouselInner = this.$refs.carouselInner;
      carouselInner.style.transform = `translateX(-${this.currentIndex * 150}px)`;
    },
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.textList.length) % this.textList.length;
      const carouselInner = this.$refs.carouselInner;
      carouselInner.style.transform = `translateX(-${this.currentIndex * 150}px)`;
    },
    accelerate(){
      this.$router.push('/accelerate')
    },
    house(){
      this.$router.push('/house')
    },
    release(){
      this.$router.push('/release')
    },
  }
}
</script>

<template>
  <div class="home">
    <div class="gu-ding">
      <div class="topSearch">
        <div class="search">
          <span><a href="#" class="bj">北京</a></span>
          <el-input placeholder="搜索关键词" clearable></el-input>
          <div class="right">
            <el-button type="text" icon="el-icon-more"></el-button>
            <el-button type="text" icon="el-icon-s-help"></el-button>
          </div>
        </div>

        <div class="text-carousel-container">
          <div class="text-butt">
            <el-button type="text" icon="el-icon-video-camera"></el-button>
          </div>
          <div class="text-carousel">
            <div class="text-carousel-inner" ref="carouselInner">
              <div v-for="(text, index) in textList" :key="index" class="text-item">
                {{ text }}
              </div>
            </div>
          </div>
        </div>
        <div class="fang">
          <div class="text-a">
            <a href="#">房东直租</a>
            <a href="#" @click="viewSublet()">个人转租</a>
            <a href="#" @click="viewDemand()">求租房屋</a>
          </div>
          <div class="text-butt">
            <el-button type="text" icon="el-icon-position" class="button"></el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="tableInfo">
      <div v-for="listing in tableData" @click="viewDetails(listing.id)" :key="listing.tableData" class="listing-item">
        <div class="listing-details">
          <div class="listing-header">
            <div class="location">{{ listing.location }}</div>
            <div class="price">{{ listing.rent }}元/月</div>
          </div>

          <div class="description">{{ listing.introduce }}</div>

          <div class="img">
            <img :src="listing.imagesUrl[0]" alt="房源图片">
            <img :src="listing.imagesUrl[1]" alt="房源图片">
            <img :src="listing.imagesUrl[2]" alt="房源图片">
          </div>

          <div class="publish-views">
            <el-button type="text" icon="el-icon-s-flag"></el-button>
            <div class="publish-date">{{ listing.createTime }}</div>
            <el-button class="right" type="text" icon="el-icon-view"></el-button>
            <div class="views">{{ listing.viewCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-item" style="color: #F4A780;">
        <el-button icon="el-icon-s-home"></el-button>
        <span>首页</span>
      </div>
      <div class="footer-item" @click="release">
        <el-button icon="el-icon-circle-plus-outline"></el-button>
        <span>发布</span>
      </div>
      <div class="footer-item" @click="accelerate">
        <el-button icon="el-icon-orange"></el-button>
        <span>加速器</span>
      </div>
      <div class="footer-item active" @click="house">
        <el-button icon="el-icon-user"></el-button>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>

<style>
.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  width: 390px;
  background-color: #fff;
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.footer-item button {
  background-color: transparent;
  font-size: 25px;
  border: none;
  color: unset;
}

.gu-ding{
  width: 390px;
}

.publish-views .views {
  margin-top: 20px;
  margin-left: 6px;
  margin-right: 6px;
}

.publish-views .publish-date {
  margin-top: 15px;
  color: #797979;
  font-size: 12px;
  margin-left: 5px;
}

.publish-views .right {
  margin-top: 20px;
  margin-left: 60px;
}

.publish-views button {
  padding: 0 5px;
  font-size: 18px;
}

.publish-views {
  display: flex;
  justify-content: space-between;
  margin-left: 6px;
  margin-right: 6px;
}

.listing-details .img {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.listing-details .img img {
  width: 30%;
  height: 80px;
  margin-left: 5px;
  margin-right: 5px;
  border: 1px solid #F4A780;
}

.listing-details {
  width: 100%;
  height: 185px;
  border: #F4A780 solid 1px;
  border-radius: 10px;
}

.tableInfo .area {
  color: #F4A780;
  font-size: 10px;
  margin-top: 8px;
  margin-left: 6px;
}

.tableInfo {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5%;
  border-radius: 10px;
}

.fang {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.text-a {
  float: left;
  margin-left: 25px;
  margin-top: 5px;
}

.text-a .text-butt {
  display: flex;
  padding: 5px 5px;
  border-radius: 15px;
  width: 70px;
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.text-butt .button {
  color: #268bff;
  font-size: 20px;
  margin-top: 5px;
  margin-right: 25px;
}

.text-a a {
  color: #5e5e5e;
  text-decoration: none;
  margin-right: 20px;
}

.text-a a:hover {
  color: #268bff;
  font-weight: bold;
}

.search .right {
  display: flex;
  border: 1px solid #F4A780;
  padding: 5px 5px;
  border-radius: 15px;
  width: 70px;
  float: right;
  margin-top: 5px;
  margin-right: 10px;
}

.search .right button {
  color: #F4A780;
  padding: 0 5px;
  font-size: 18px;
}

.topSearch input {
  width: 200px;
  height: 30px;
  border-radius: 50px;
  padding-left: 40px;
}

.topSearch .el-input {
  width: 200px;
  margin-left: 15px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.topSearch span {
  display: flex;
  font-size: 15px;
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #f15a10;
}

.topSearch .bj {
  color: #f15a10;
  text-decoration: none;
}

.home {
  width: 390px;
  margin: 0 auto;
}

.topSearch {
  width: 100%;
  justify-content: space-between;
}

.listing-item {
  padding: 11px;
  margin-right: 10px;
}

.listing-header {
  display: flex;
  height: 30px;
}

.location, .area {
  font-size: 13px;
  padding: 0 10px;
  margin-top: 5px;
}

.price {
  color: red;
  font-size: 1.1em;
  margin-bottom: 10px;
  margin-left: 55px;
  margin-top: 3px;
}

.description {
  float: left;
  font-size: 11px;
  font-weight: bold;
  margin-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  width: 90%;
  text-overflow: ellipsis;
}

.details-link {
  color: blue;
  cursor: pointer;
}

.publish-date, .views {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
}

img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

.text-carousel-container .text-butt {
  width: 10%;
  height: 25px;
  border: 1px solid #797979;
  border-left: none;
  border-right: none;
  background-color: #F4A780;
  float: left;
  padding-top: 5px;
}

.text-butt button {
  color: #ffffff;
  font-size: 20px;
  padding: 0 6px;
}

.text-carousel-container .text-carousel {
  width: 90%;
  height: 25px;
  border: 1px solid #797979;
  border-left: none;
  border-right: none;
  background-color: #F4A780;
  overflow: hidden;
  white-space: nowrap;
  float: right;
  padding-top: 5px;
}

.text-carousel-container .text-carousel-inner {
  display: inline-flex;
  transition: transform 0.5s ease;
}

.text-carousel-container .text-item {
  display: inline-block;
  padding: 0 10px;
  color: #ffffff;
  font-size: 14px;
}
</style>